<template>
    <div class="user-info">
        <!-- 个人信息 -->
        <el-form label-width="100px" :model="userInfo" ref="infoForm" :rules="rules">
            <!--手机 -->
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="userInfo.mobile" style="width:220px" />
            </el-form-item>
            <!-- 工号 入职时间 -->
            <el-form-item label="入职时间" prop="timeOfEntry">
                <el-date-picker v-model="userInfo.timeOfEntry" type="date" class="inputW" value-format="yyyy-MM-dd" />
            </el-form-item>
            <!-- 员工照片 -->
            <el-form-item label="员工头像">
                <!-- 放置上传图片 -->
                <uploadImg @upload="hLoad"></uploadImg>
            </el-form-item>
            <!-- 保存个人信息 -->
            <el-form-item>
                <el-button type="primary" @click="hUpdate">保存更新</el-button>
                <el-button @click="$router.back()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { updateEmployee } from '@/api/employees';
import { getUserDetailById } from '@/api/user';
import { validMobile } from '@/utils/validate';
import { Loading } from 'element-ui';

export default {
    data() {
        const validMob = (rules, value, callback) => {
            validMobile(value) ? callback() :
                callback(new Error('请输入正确的手机号'))
        }
        return {
            userInfo: {
                mobile: '',
                timeOfEntry: ''
            },
            rules: {
                mobile: [
                    { required: true, trigger: 'blur', message: '手机号不能为空' },
                    { validator: validMob },

                ],
                timeOfEntry: [{ required: true, trigger: 'change', message: '请选择入职日期' }],
            },
        }
    },
    created() {
        this.loadUserDetail()
    },
    methods: {

        async loadUserDetail() {
            try {

                const res = await getUserDetailById(this.$route.params.id)
                console.log(res);
                this.userInfo = res.data

            } catch (e) {
                console.log(e);
            }
        },
        hLoad(e) {
            this.userInfo.staffPhoto = e
        },
        async hUpdate() {
            const valid = this.$refs.infoForm.validate().catch(e => e)

            if (!valid) return
            const res = await updateEmployee(this.userInfo).catch(e => this.$message.error(e.message))
            this.$message.success(res.message)
            console.log(res);
        }
    }
}
</script>

<style scoped lang="scss">
.user-info {
    padding-top: 20px;
}
</style>